引入腾讯地图,电脑内存CPU占比升高,卡顿问题

您所在的位置:网站首页 高德地图web 20卡顿 引入腾讯地图,电脑内存CPU占比升高,卡顿问题

引入腾讯地图,电脑内存CPU占比升高,卡顿问题

2023-08-18 11:01| 来源: 网络整理| 查看: 265

最近在做一个项目,需要应用腾讯地图,但是每当进入包含腾讯地图的页面,电脑内存占比就会持续升高,没过几次,电脑就会变的非常卡顿,

这是没有进入地图页面之前的内存占比:

这是进入地图页面几次后的内存占比,并且该内存占比并不会下降的很快,对于一般的笔记本而言就会造成非常严重的卡顿问题。

 查询了许多资料都没有找到相对应的解决方法,最后还是前辈一针见血的指出问题,可能是地图实例被多次创建,占用大量缓存的问题,找到问题所在就非常容易解决问题了,这里有两种方式:

1、可以通过对地图的DOM节点进行删除的操作,在页面退出销毁之前,清除地图所在的DOM节点,可以通过v-if进行实现

2、这一种是比较推荐的方式,在腾讯地图官方文档中查找销毁地图实例的方法,可以通过map.destroy()方法,在页面销毁之前进行地图实例的销毁

map.destory()

再次进入地图页面可以看到,电脑的内存占比不会持续升高,会维持在一个固定的范围,并且在退出页面之后,内存的释放也非常迅速,不会造成应用网站的卡顿现象。

除此之外,除了内存的升高,在地图组件或者其他组件引入的时候还要注意cpu的占用情况,此处非常注意,在使用需要加载大量资源创建实例的组件的时候,不论是什么项目,以vue为例,尽量不要将创建的实例存储在data中,这样会在进入该页面的时候占用耗费大量资源,导致网页应用卡顿,如图:

 上图可以看到,cpu的占用耗费是非常高的,并且难以下降

这里有一个解决办法,就是在vue页面内声明一个全局变量用来接收实例对象,在页面的销毁的时候在进行释放,这样操作会有效减少cpu的占用情况,提升网页应用运行速率。

以上仅为个人见解



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3